<link rel="stylesheet" href="ccay/example/demo.css"
	type="text/css" />
<script type="text/javascript"
	src="ccay/web/resource/ui/ccay.simpleflow.js"></script>
<script type="text/javascript" src="ccay/workflow/workflow.js"></script>
<script type="text/javascript" src="ccay/example/demo.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="ccay/example/ui/simpleflow/simpleFlow.js"></script>
<div id="simpleflowDemo">
	<div title='API' tabid='tab1'>
		<div>
			<h2>$.fn.ccaySimpleFlow(op)</h2>
			<h3>作用：简易流程图 控件（包含两种类型）渲染接口</h3>
			<br>
			<h3>使用时，需自行在页面中引入js资源：ccay/web/resource/ui/ccay.simpleflow.js</h3>
			<form class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>
						<li class="ccay-form-row"><samp>
								<h3>op参数</h3>
							</samp> <span class="ccay-form-input">
								<h3>描述</h3>
						</span></li>
						<li class="ccay-form-row"><samp class="i18n" i18nKey="type"></samp>
							<span class="ccay-form-input"> {String}
								<p>流程图类型，有“简易流程图flow”和“时间轴timeline”两种类型
								<p>默认值："flow"
								<p>可选值："flow"，"timeline"
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="processInstanceId"></samp> <span
							class="ccay-form-input"> {Number}
								<p>简易流程图的流程实例ID，
								<p>默认值：无，
								<p>timeline类型无需指定
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="templateName"></samp> <span class="ccay-form-input">
								{String}
								<p>
									指定模板名称，<font color="red">在富文本中配置</font>，优先于template的设置
								<p>默认值：无
								<p>对应的两种富文本类型：1、简易流程图：SimpleDiagramTemplate。2、时间轴：TimelineTemplate
								
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="template"></samp> <span class="ccay-form-input">
								{String}
								<p>指定模板内容
								<p>默认值：无
						</span></li>
						<li class="ccay-form-row"><samp class="i18n" i18nKey="nodes"></samp>
							<span class="ccay-form-input"> {Array}
								<p>节点数据
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="sortFormat"></samp> <span class="ccay-form-input">
								{String}
								<p>分组格式，与dateFormat配合使用,无配置时，系统默认的年月日格式
								<p>默认值：系统默认的年月日格式
								<p>@仅适用于时间轴
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="dateFormat"></samp> <span class="ccay-form-input">
								{String}
								<p>子节点的日期显示
								<p>默认值：系统默认的时分格式
								<p>@仅适用于时间轴
						</span></li>
						<li class="ccay-form-row"><samp class="i18n"
								i18nKey="dateName"></samp> <span class="ccay-form-input">
								{String}
								<p>指定主键值，时间字段 的名称
								<p>默认值："date"
								<p>@仅适用于时间轴
						</span></li>
						<li class="ccay-form-row"><samp class="i18n" i18nKey="asc"></samp>
							<span class="ccay-form-input"> {Boolean}
								<p>是否升序查看，true为降序
								<p>默认值：false
								<p>@仅适用于时间轴
						</span></li>
					</ul>
				</div>
			</form>
		</div>
		
	</div>
	<div title='简易流程图' tabid='tab2'>
		<div id="simpleFlow1"></div>
		<br>
		<h3>html Code</h3>
		<div class='codeArea'>
			<pre id='html1'>
&lt;div id="simpleFlow_1">&lt;/div>
				</pre>
		</div>
		<h3>js Code</h3>
		<div class='codeArea'>
			<pre id='js1'>
var op = {
		//<font color="red">指定富文本的模板名称，优先template</font>
		//templateName:"simpleTemplateDemo",
		//<font color="red">指定富文本的模板内容</font>
		template:$("#templateContent").val(),
		//<font color="red">指流程实例ID</font>
		processInstanceId : 151007,
		//<font color="red">指流数据节点，需自行查出数据</font>
		nodes: [
			{name:"提交",text:"",status:"ready",users:[{handlerName:"test1",type:"u"}],date:"2013-12-1 08:00"},
			{name:"XXX审批",text:"",status:"ready",users:[{handlerName:"linshijian 00195395",type:"u"},{handlerName:"Ccay_VIP",type:"g"}],date:"2013-12-1 10:00"},
			{name:"XXX审批",text:"",status:"doing",users:[{handlerName:"test5",type:"u"}],date:""},
			{name:"XXX审批",text:"",status:"wait",users:[{handlerName:"test1",type:"u"}],date:""},
			{name:"完成",text:"",status:"wait",users:"",date:""}
		]
};

$("#simpleFlow_1").ccaySimpleFlow(op);
				
				</pre>
		</div>
		<h3>模板：</h3>
		<div class='codeArea'>
<pre id="template1">
&lt;div>
	&lt;ul>
		&lt;li class="simpleflow-node-top" title="${name}">${name}&lt;/li>
		&lt;li class="simpleflow-node-name">&lt;/li>
		&lt;li class="simpleflow-node-handler simpleflow-node-content">
		&lt;% if(typeof users !='undefined' && $.isArray(users)){
		   for(var a = 0, user; user = users[a]; a++){ 
				 if(user.type == 'u'){  %>
					&lt;a class="handler-user">${user.handlerName}&lt;/a>
				 &lt;%}else{%>
					&lt;a class="handler-user group">${user.handlerName}&lt;/a>
		&lt;% }}} %>
		&lt;/li>
		&lt;li class="simpleflow-node-time">${date}&lt;/li>
	&lt;/ul>
&lt;/div>
</pre>
		</div>
		<div class="try">
			<a class="ccay-link-btn"
				onclick="Ccay.example.openTry('#simpleflowDemo',$('#js1').html(),$('#html1').html());$('#templateContent').html($('#template1').html())">亲自试一试</a>
		</div>
	</div>
	<div title='时间轴' tabid='tab3'>
		<div id="simpleFlow2"></div>

		<h3>html Code:</h3>
		<div class='codeArea'>
			<pre id="html2">
&lt;div id="simpleFlow_2">&lt;/div>
				</pre>
		</div>
		<h3>js Code:</h3>
		<div class='codeArea'>
			<pre id="js2">
var op = {
	type:"timeline", // <font color="red">重要！！！必须设置</font>
	//sortFormat:"yyyy/MM/dd", // <font color="red">分组格式，与dateFormat配合使用,无配置时，系统默认的年月日格式</font>
	//dateFormat:"hh:mm", // <font color="red">子节点的日期显示，默认系统的时分格式</font>
	//dateName:"date", // <font color="red">重要！！！指定时间字段，默认为"date"</font>
	//asc:true, // <font color="red">默认降序，true升序, 默认false降序</font>
	template:$("#templateContent").val(),
	//templateName: "simpleflowDemo", // <font color="red">必须设置   指定富文本配置的TimelineTemplate的模板名称</font>
	nodes: [
		{name:"1",text:"",status:"ready",users:[{handlerName:"test1",type:"u"}],date:"2013-05-01 08:00"},
		{name:"2",text:"",status:"ready",users:[{handlerName:"linshijian 00195395",type:"u"},{handlerName:"Ccay_VIP",type:"g"}],date:"2013-05-01 07:00"},
		{name:"3",text:"",status:"doing",users:[{handlerName:"test5",type:"u"}],date:"2013-05-01 06:00"},
		{name:"4",text:"",status:"wait",users:[{handlerName:"test1",type:"u"}],date:"2013-05-02 05:00"},
		{name:"5",text:"",status:"wait",users:"",date:"2013-05-02 04:00"}
	]
};

$("#simpleFlow_2").ccaySimpleFlow(op);
				</pre>
		</div>
		<h3>模板：</h3>
		<div class='codeArea'>
			<pre id="template2">
&lt;div class="timeline-left">
	&lt;samp class="timeline-toggle">${date}&lt;/samp>
&lt;/div>
&lt;div class="timeline-right">
&lt;% if(name){ %>
&lt;div class="timeline-arrow">&lt;/div>
&lt;div class="timeline-content">
&lt;form class="ccay-form" >
	&lt;table class="ccay-table">
		&lt;tr>
			&lt;th style="width:25%">name&lt;/th>
			&lt;td style="width:75%">${name}&lt;/td>
		&lt;/tr>
		&lt;tr>
			&lt;th>user&lt;/th>
			&lt;td>
			&lt;% if(typeof users !='undefined' && $.isArray(users)){
			   for(var a = 0, user; user = users[a]; a++){ 
				 if(user.type == 'u'){  %>
					&lt;a class="ccay-link-btn handler-user">${user.handlerName}&lt;/a>
				 &lt;%}else{%>
					&lt;a class="ccay-link-btn handler-user group">${user.handlerName}&lt;/a>
			&lt;% }}} %>
			&lt;/td>
		&lt;/tr>
	&lt;/table>
&lt;/form>
&lt;/div>
&lt;% }%>
&lt;/div>
</pre>
		</div>
		<div class="try">
			<a class="ccay-link-btn"
				onclick="Ccay.example.openTry('#simpleflowDemo',$('#js2').html(),$('#html2').html());$('#templateContent').html($('#template2').html())">亲自试一试</a>
		</div>
	</div>
	<div title="试一试" tabid="trytab">
		<fieldset class='ccay-demo'>
			<legend>
				<h2>代码区</h2>
			</legend>

			<span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果 ————></span><input
				value="try it yourself" type="button"
				onclick="Ccay.example.runDemo()" />

			<div>
				<table style="width: 100%;">
					<tr>
						<td style="width: 100%;">
							<h3>js Code:</h3> <!-- 高度按需来调整。默认最小应为100px --> <textarea
								id="jsTxt" style="height: 150px; width: 99%;"></textarea>
						</td>
					</tr>
					<tr>
						<td style="width: 100%;">
							<h3>html Code:</h3> <!-- 高度按需来调整。默认最小应为100px --> <textarea
								id="htmlTxt" style="height: 150px; width: 99%;"></textarea>
						</td>
					</tr>
					<tr>
						<td style="width: 100%;">
							<h3>tempalte Code:</h3> <textarea id="templateContent"
								style="height: 150px; width: 99%;"></textarea>
						</td>
					</tr>
				</table>
			</div>
		</fieldset>
		<fieldset class='ccay-demo'>
			<legend>
				<h2>结果区</h2>
			</legend>
			<div>
				<div style="overflow: auto;" id="demoMainPanel"></div>
			</div>
		</fieldset>
	</div>
	<div title="FAQ">
		<form class="init ccay-form">
			<div class="ccay-form-body">
				<ul>
					<li class="ccay-form-row"><samp>
							<h3>问题</h3>
						</samp> <span class="ccay-form-input">
							<h3>解决方案</h3>
					</span></li>
				</ul>
			</div>
			<div class="ccay-form-custom">
				<ul>
					<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole  -->
					<li class="ccay-form-row"><samp class="i18n"
							i18nKey="1,tab如何绑定点击事件？"></samp> <span class="ccay-form-input">使用fnAfterSelectItem事件设置，或者fnOnceSelecteItem事件。
					</span></li>
				</ul>
			</div>
		</form>
	</div>
</div>


